<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>艺术殿堂</title>
		<script src="js/layui/layui.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" />
		<link rel="stylesheet" href="css/main.css" />
		<script type="text/javascript" src="js/AppSetting.js"></script>
		<style>
			.content {
				background-color: #fff;
				padding: 1rem 2rem;
			}
			
			.imagelist {
				display: flex;
				flex-wrap: wrap;
			}
			
			.imagelist img {
				width: auto;
				height: 4rem;
				margin: 0.6rem;
			}
			
			.content p {
				text-indent: 28px;
			}
			
			.layui-timeline-item {
				padding-bottom: 0;
			}
		</style>
	</head>

	<body>
		<div class="page">
			<!--
            	作者：1832600296@qq.com
            	时间：2018-02-25
            	描述：宣传图片
            -->
			<div class="layui-carousel" id="carousel">
				<div carousel-item>
					<img src="img/ArtsPalace.jpg" />
					<!--<img src="img/2.jpg" />
					<img src="img/3.jpg" />-->
				</div>
			</div>
			<!--
            	作者：1832600296@qq.com
            	时间：2018-02-25
            	描述：内容
            -->
			<div class="content">
				<ul id="ArtsList" class="layui-timeline">

					<!--<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">2017年8月18日</h3>
							<p>金泰你胜多负少金泰你胜多负少士大夫撒似的发射点手动阀手动阀是开发建设宽带是快递发件金泰你胜多负少士大夫撒似的发射点手动阀手动阀是开发建设宽带是快递发件金泰你胜多负少士大夫撒似的发射点手动阀手动阀是开发建设宽带是快递发件金泰你胜多负少士大夫撒似的发射点手动阀手动阀是开发建设宽带是快递发件士大夫撒似的发射点手动阀手动阀是开发建设宽带是快递发件</p>
							<div class="imagelist">
								<img src="img/1.jpg">
								<img src="img/2.jpg">
								<img src="img/3.jpg">
								<img src="img/4.jpg">
								<img src="img/1.jpg">
							</div>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<div class="layui-timeline-title">过去</div>
						</div>
					</li>-->
				</ul>
			</div>
		</div>
	</body>

</html>
<script>
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	layui.use(['element', 'carousel'], function() {
		var element = layui.element,
			carousel = layui.carousel;

		//宣传图片
		carousel.render({
			elem: '#carousel',
			width: '100%', //设置容器宽度
			height: '220px',
			autoplay: false,
			arrow: 'none', //始终显示箭头
			indicator: 'none',
			anim: 'fade', //切换动画方式
			interval: 10000 //10秒
		});

		BindArtsPalace();

	});

	/**
	 * 获取艺术殿堂列表
	 */
	function BindArtsPalace() {

		layui.use('flow', function() {
			var flow = layui.flow;

			//流加载
			var pageSize = 15; //初始化默认显示15条
			ajaxget({
				url: 'api/BlogPublic/GetBlogArtsList',
				success: function(data) {

					if(data == null) {
						return;
					}

					var pagetotal = Math.ceil(data.length / pageSize); //总页数

					flow.load({
						elem: '#ArtsList',
						isLazyimg: true, //开启图片懒加载
						done: function(page, next) {
							var lis = [];
							for(var index = (page - 1) * pageSize, len = data.length > page * pageSize ? page * pageSize : data.length; index < len; index++) {

								//组合html
								lis.push('<li class="layui-timeline-item">');
								lis.push('<i class="layui-icon layui-timeline-axis">&#xe63f;</i>');
								lis.push('<div class="layui-timeline-content layui-text">');
								lis.push('<h3 class="layui-timeline-title">' + data[index].StrAddtime + '</h3>');
								lis.push('<p>' + data[index].Title + '</p>');
								if(data[index].ImageList != "") {
									lis.push('<div class="imagelist">');
									var imagelist = data[index].ImageList.split(',');
									
									for(var i = 0; i < imagelist.length-1; i++) {
										lis.push('<img src="' + ApiURL + imagelist[i] + '">');
									}

									lis.push('</div>');
								}

								lis.push('</div>');
								lis.push('</li>');
							}

							if(page + 1 > pagetotal) {
								lis.push('<li class="layui-timeline-item log-timeline-item">');
								lis.push('<i class="layui-icon layui-timeline-axis">&#xe63f;</i>');
								lis.push('<div class="layui-timeline-content layui-text">');
								lis.push('<div class="layui-timeline-title">过去</div>');
								lis.push('</div>');
								lis.push('</li>');
							}

							next(lis.join(''), page < pagetotal);
						}
					});

					//图片查看
					layer.photos({
						photos: '#ArtsList',
						anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
					});

				}
			})
		});
	}
</script>